<template>
    <div>
        <bread-crumb></bread-crumb>
        <table>
           <thead>
              <tr>
              <th>编号</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
              <th>头像</th>
              <th>专业</th>
              <th>班级</th>
              <th>操作</th>
            </tr>
           </thead>
           <tbody>
              <tr v-for="(item,index) in list" :key="item._id">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
                <td><img class="avatar" :src="item.image"></td>
                <td>{{item.subjectsId?item.subjectsId.name:'暂无专业'}}</td>
                <td>{{item.classesId?item.classesId.name:'暂无班级'}}</td>
                <td>
                   <button class="btn detal" @click="goStudentDetail(item._id)">查看</button>
                   <button class="btn del">删除</button>
                   <button class="btn detal" @click="goStudentUpdate(item._id)">修改</button>
                </td>
              </tr>
           </tbody>
        </table>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
export default {
  components: { BreadCrumb },
  data(){
    return{
      list:[]
    }
  },
  methods:{
    async getStudents(){
      let result=await this.$api.students.getStudents()
      console.log(result.data.result);
      this.list=result.data.result
    },
    goStudentDetail(_id){
      this.$router.push({
        name:'xsxq',
        query:{
          _id
        }
      })
    },
    goStudentUpdate(_id){
       this.$router.push({
         name:'xsxg',
         params:{
           id:_id
         }
       })
    }
  },
  created(){
    console.log('aa',this);
    this.getStudents()
  }
}
</script>

<style>
  .avatar{
    width: 80px;
    height: 80px;
  }
  table{
    border-collapse: collapse;
    width: 1250px;
  }
  th,td{
    border:1px solid #ccc;
    padding:8px;
    text-align: center;
  }
  .btn{
    width: 80px;
    height: 30px;
    border: none;
    margin: 5px;
    color: white;
  }
  .del{
    background-color:tomato;
  }
  .detal{
    background: #008BD3;
  }
</style>